<script setup lang="ts">
import { User } from '$/client'
import { getGenderText } from '$/vexip/presets'
import ComCtl from '@/components/ComCtl.vue'
import OrderForm from '@/components/form-user/OrderForm.vue'
import { CommentIn, Comments, Copilots, OrderIn, Orders, Stars } from '@/scripts/client-user'
import { queryAsInt } from '@/scripts/utils'
import { Clipboard as IClipboard, Star as IStar } from '@vexip-ui/icons'
import { useRequest } from 'alova/client'
import { Button, Modal, Textarea, Button as VButton, Card as VCard } from 'vexip-ui'
import { computed, ref } from 'vue'

const copilotId = queryAsInt('copilot')
const content = ref('')
const commentMo = computed(() => CommentIn.inst({ copilot: copilotId, content: content.value }))
const orderMo = ref(OrderIn.inst({ copilot: copilotId }))
const showCreate = ref(false)
const canStar = ref(true)

const { data: copilot } = useRequest(() => Copilots.retrieve(copilotId), {
  initialData: User.inst()
})
const { data: comments, send: refresh } = useRequest(() => Comments.list(copilotId), {
  initialData: []
}).onSuccess(() => (content.value = ''))
const { data: copilots } = useRequest(Copilots.tinylist, {
  initialData: []
})
const { loading: creatingComment, send: createComment } = useRequest(() => Comments.create(commentMo.value), {
  immediate: false
}).onSuccess(refresh)
const { loading: creatingOrder, send: createOrder } = useRequest(() => Orders.create(orderMo.value), {
  immediate: false
}).onSuccess(() => {
  showCreate.value = false
  orderMo.value.reset()
})
const { send: createStar } = useRequest(() => Stars.create(copilotId), {
  immediate: false
}).onSuccess(() => {
  canStar.value = false
})
</script>

<template>
  <ComCtl content-class="flex flex-col gap-4">
    <VCard class="mx-auto w-300" :title="copilot.name">
      <template #extra>
        <div>性别：{{ getGenderText(copilot.gender) }}</div>
      </template>
      <div class="grid grid-cols-2 gap-4">
        <div class="flex flex-col gap-4">
          <div class="flex gap-4 items-center">
            <div class="justify-center flex">
              <img v-if="copilot.avatar" class="size-[200px] object-cover rounded-2xl bg-white" :src="copilot.avatar" />
              <div class="size-[200px] object-cover rounded-2xl b-dashed" v-else></div>
            </div>
            <div class="flex flex-col">
              <div class="flex gap-2">
                <div>备注:</div>
                <div>{{ copilot.description ?? 'None' }}</div>
              </div>
              <div>评论 {{ comments.length }} 条</div>
            </div>
          </div>
          <VButton type="info" @click="createStar" :icon="IStar" :disabled="!canStar" block>收藏</VButton>
          <VButton @click="showCreate = true" :icon="IClipboard" block>下单</VButton>
        </div>
        <div class="h-full flex flex-col gap-4">
          <div class="flex flex-col gap-1">
            <div v-for="i in comments" :key="i.id">{{ i.user.name }} : {{ i.content }}</div>
          </div>
          <div class="w-full flex flex-col gap-2 mt-auto">
            <Textarea v-model:value="content" placeholder="留下你的留言" />
            <Button @click="createComment" :loading="creatingComment" type="primary" block>提交</Button>
          </div>
        </div>
      </div>
    </VCard>
    <template #modals>
      <Modal title="创建" v-model:active="showCreate">
        <OrderForm v-model="orderMo" :loading="creatingOrder" :submit="createOrder" :copilots="copilots" />
      </Modal>
    </template>
  </ComCtl>
</template>

<style scoped>
.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

.card {
  border: 2px solid gray;
  background-color: var(--vxp-bg-color-base);
  --uno: 'text-white no-underline cursor-pointer p-4 transition-all duration-200 hover:shadow-[0px_0px_10px_2px] shadow-white rounded-2xl';
}
</style>
